<template>
    <div class="shake" v-show="curPageShow">
        <div class="shakeBg">
            <div class="base_title"><img src="../assets/img/base_title.png" alt=""></div>

            <ul class="drinkDosing">
                <li
                    v-for="(item,index) in activeDrink.step"
                    :key="index">
                    <img :src="item.dosing" alt="">
                </li>
            </ul>
            
            <div class="container">
                <img :src="activeDrink.emptyContain" alt="">
                <img class="stepImg" :src="activeDrink.complete.img" alt="">
            </div>

            <div class="title ">
                <div class="l">
                    <img src="../assets/img/dot_lt.png" alt="">
                    <img src="../assets/img/dot_lb.png" alt="">
                </div>
                <div class="m">
                    <img src="../assets/img/complete_text.png" alt="">
                </div>
                <div class="r">
                    <img src="../assets/img/dot_rt.png" alt="">
                    <img src="../assets/img/dot_rb.png" alt="">
                </div>
            </div>

        </div>
        <div class="shakeAinimate">

            <div class="counter">
                <img ref="counter" src="static/img/counter/15.png" alt="">
            </div>

            <div class="shake_button">
                <img class="h5Shake" src="../assets/img/shakeIcon.png" alt="">
            </div>
        </div>
        <div class="shake_text_bottom"><img src="../assets/img/shake_text_bottom.png" alt=""></div>
        <div class="shade">
             <img v-if="timeCount>=10" src="../assets/img/shake_shade1.jpg" alt=""> 
             <img v-if="timeCount>=5 && timeCount<=10" src="../assets/img/shake_shade2.jpg" alt="">
             <img v-if="timeCount<=5" src="../assets/img/shake_shade3.jpg" alt="">  
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import preLoadImg from '../mixins/preloadImg.js'
    // navigator.vibrate = navigator || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
    let timer=null;
    let removeYao=null;
    export default {
        name:'shake',
        mixins:[preLoadImg],
        data(){
            return{
                timeCount:15,
                shakeCount:0,
                minShakeCount:20,
                isShake:false    
            }
        },
        computed:{
            ...mapGetters(['activeDrink']),
        },
        methods:{
            bindShakeEvent(){
                let that=this;
                let shake=4000; 
                let last_update=0;
                let count=0;   
                let x=0;
                let y=0;
                let z=0;
                let last_x=0;
                let last_y=0;
                let last_z=0;  
                if(window.DeviceMotionEvent){  
                        window.addEventListener("devicemotion",(eventData)=>{
                            let acceleration = eventData.accelerationIncludingGravity;
                            let currTime=new Date().valueOf();  
                            let diffTime=currTime-last_update;  
                                if(diffTime>100){

                                    last_update=currTime;  
                                    x=acceleration.x;  
                                    y=acceleration.y;  
                                    z=acceleration.z;  
                                    let speed=Math.abs(x + y + z - last_x - last_y - last_z)/diffTime*10000;
                                    if(speed>shake){  
                                        this.shakeCount++;
                                    }  
                                    last_x= x;  
                                    last_y= y;  
                                    last_z= z;  
                                }  

                        },false);
                    }else{  
                        
                    }   
            }
        },
        created(){
           this.bindShakeEvent()
           this.preLoadImg()
        },
        mounted(){
            // let timeCount=15;
            this.isShake=true;// 开始计时
            timer=setInterval(()=>{
                // 切换数字图片
                this.timeCount--;
                if(this.timeCount<=0){
                    document.getElementById('shake_music').pause()
                    clearInterval(timer);
                    // 解除摇动事件绑定
                    if(this.shakeCount>=this.minShakeCount){
                        document.getElementById('success_music').play()
                        this.$store.dispatch('switchPage','success')
                    }else{
                        document.getElementById('failed_music').play();
                        this.$store.dispatch('switchPage','failed')
                        document.getElementById('stir_music').pause();
                        document.getElementById('shake_music').pause();
                    }
                }
                this.$refs.counter.src=`static/img/counter/${this.timeCount}.png`

            },1000)
        },
        watch:{
            shakeCount(newVal){
                if(newVal>=this.minShakeCount){
                    this.$store.dispatch('switchPage','success')
                    clearInterval(timer);
                    document.getElementById('stir_music').pause();
                    document.getElementById('shake_music').pause();
                    document.getElementById('success_music').play();
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .shake {
        position: relative;
        width: 100%;
        height: 100%;

        .shade{
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            opacity: 0.8;
            z-index: 100;
            img{
                position:absolute;
                top:0;
                width:100%;
                height:100%;
            }
        }

        .shakeAinimate {
            $width:40%;
            position: absolute;
            top:25%;
            left:50%;
            z-index: 101;
            margin-left:-$width/2;
            margin-top:0;
            width: $width;
            height: 18%;

            img {
                width: 100%;
            }

            .counter{
                margin:0 auto;
                width:100%;
                height:62%;
                overflow:hidden;
                // background-image: url(../assets/img/counter.png);
                // background-position-Y: -3030%;
                // background-size: 100% auto;
                img{
                    height: 100%;
                }
            }
            .shake_button{
                width:43%;
                height:30%;
                margin:0 auto;
                animation-iteration-count: infinite;
                animation-duration:2s;
                img{
                    width:200%;
                    margin-left:-50%;
                }
            }
        }
        
        .shake_text_bottom{
            position: absolute;
            top:72%;
            width:50%;
            left:50%;
            margin-left:-25%;
            z-index:555;
            img{width:100%;}
        }
        .base_title{
            width:100%;
            text-align:center;
            padding:10px 0;
            img{width:60%;}
        }

        .drinkDosing{
            $width:80%;
            position: absolute;
            top:15%;
            left:50%;
            margin-left:-$width/2;
            width:$width;
            display: flex;
            justify-content: space-around;
            li{
                list-style: none;
                animation-iteration-count: infinite;
                animation-duration:.8s;
                img{width:100%;}

            }
        }
        .container{
            $width:75%;
            $height:40%;
            position: absolute;
            top:28%;
            left:35%;
            margin-left:-23%;
            width:$width;
            height:$height;
            img{width:100%;}
            .stepImg{
                position: absolute;
                top:0;
                left:0%;
                width:100%;
            }
        }
        .title{
            $width:70%;
            position: absolute;
            bottom:13%;
            left:50%;
            margin-left:-$width/2;
            // margin-top:-20px;
            width: $width;
            height: 40px; 
            display: flex;
            animation-iteration-count: 1;
            animation-duration:2s;
            animation-delay:1s;


            .l,.r{
                display: flex;
                flex-direction: column;
                animation-iteration-count: 2;
                animation-duration:2s;
                animation-delay:2s;

            }
            img{
                width:100%;
                height:100%;
            }
            .l>img,.r>img{height:40%;}
        }
    }
    #shake_music{display: none;}
</style>

